<template>
  <div class="list-page">
    <a-spin :spinning="loading">
      <div class="top-active">
        <div class="top-search">
          <a-input-search
            placeholder="请输入内容"
            enter-button="搜索"
            @search="search"
          />
        </div>
        <div class="btn">
          <a-button v-if="flag" :disabled="flag" icon="check-circle"
            >通过</a-button
          >
          <a-popconfirm
            v-else
            title="确认要通过吗?"
            ok-text="通过"
            cancel-text="取消"
          >
            <a-button :disabled="flag" icon="check-circle">通过</a-button>
          </a-popconfirm>
          <a-button
            :disabled="flag"
            @click="rejectVisible = true"
            icon="exclamation-circle"
            >驳回</a-button
          >
          <a-popconfirm
            title="确认删除所选标注吗?"
            ok-text="是"
            cancel-text="否"
          >
            <a-button :disabled="flag" icon="delete" type="danger"
              >删除</a-button
            >
          </a-popconfirm>
        </div>
      </div>
      <div class="table-box">
        <a-table
          :columns="columns"
          :row-selection="rowSelection"
          :data-source="source"
          bordered
          :rowKey="(record, index) => index"
        >
          <a
            slot="yttx"
            slot-scope="text"
            href="http://dark.childstore.cn/annotations.html"
          >
            <img v-if="text" src="/pic/1.jpg" class="view-pic" alt="" />
            <span v-else>标注</span>
          </a>
          <a slot="swtx" href="http://dark.childstore.cn/annotations.html"
            ><img src="/pic/1.jpg" class="view-pic" alt=""
          /></a>
          <a slot="bktx" href="http://dark.childstore.cn/annotations.html"
            ><img src="/pic/1.jpg" class="view-pic" alt=""
          /></a>
          <a slot="qttx" href="http://dark.childstore.cn/annotations.html"
            ><img src="/pic/1.jpg" class="view-pic" alt=""
          /></a>
          <a slot="xq" href="http://dark.childstore.cn/annotations.html"
            >详情</a
          >
        </a-table>
      </div>
    </a-spin>
    <a-modal
      v-model="rejectVisible"
      title="驳回"
      :width="400"
      :maskClosable="false"
      class="yp-modal"
      okText="确认"
      cancelText="取消"
    >
      <div class="ipt-box-r">
        <div class="lb">驳回理由</div>
        <a-input style="flex-grow: 1" />
      </div>
    </a-modal>
  </div>
</template>

<script>
let vm = null;
export default {
  name: "home",
  data() {
    return {
      loading: false,
      rejectVisible: false,
      flag: true,
      rowSelection: {
        onChange: (selectedRowKeys) => {
          vm.tableSelect(selectedRowKeys);
        },
      },
      columns: [
        {
          title: "印章名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "印文",
          dataIndex: "text",
          key: "text",
        },
        {
          title: "印鈕",
          dataIndex: "btn",
          key: "btn",
        },
        {
          title: "印章篆刻者",
          dataIndex: "scz",
          key: "scz",
        },
        {
          title: "印主",
          dataIndex: "yz",
          key: "yz",
        },
        {
          title: "材質與構造",
          dataIndex: "cz",
          key: "cz",
        },
        {
          title: "印蛻圖像",
          dataIndex: "yttx",
          key: "yttx",
          scopedSlots: { customRender: "yttx" },
        },
        {
          title: "釋文圖像",
          dataIndex: "swtx",
          key: "swtx",
          scopedSlots: { customRender: "yttx" },
        },
        {
          title: "邊款圖像",
          dataIndex: "bktx",
          key: "bktx",
          scopedSlots: { customRender: "yttx" },
        },
        {
          title: "其他圖像",
          dataIndex: "qttx",
          key: "qttx",
          scopedSlots: { customRender: "yttx" },
        },
        {
          title: "注入人员",
          dataIndex: "zrry",
          key: "zrry",
        },
        {
          title: "审核人员",
          dataIndex: "shry",
          key: "shry",
        },
        {
          title: "注入時間",
          dataIndex: "sj",
          key: "sj",
        },
        {
          title: "审核時間",
          dataIndex: "shsj",
          key: "shsj",
        },
        {
          title: "详情",
          dataIndex: "xq",
          key: "xq",
          scopedSlots: { customRender: "xq" },
        },
      ],
      source: [
        {
          id: 12430,
          name: "名称",
          ys: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          scz: "张三",
          yz: "张三",
          yr: "张三",
          btn: "印纽",
          year: "1940",
          vision: "鈐印本",
          text: "松蔭",
          cz: "材质1",
          sj: "2024-02-28",
          shsj: "2024-02-28",
          zrry: "管理员",
          shry: "管理员",
          xq: "/pic/1.jpg",
          yttx: "1",
          swtx: "1",
        },
        {
          id: 124310,
          name: "名称2",
          ys: "印谱简介印谱简介印谱简介印谱简介印谱简介印谱简介",
          history: "0215415",
          scz: "张三",
          yz: "张三",
          yr: "张三",
          btn: "印纽",
          year: "1940",
          vision: "鈐印本",
          zrry: "管理员",
          shry: "管理员",
          sj: "2024-02-28",
          shsj: "2024-02-28",
          text: "松蔭",
          cz: "材质1",
          xq: "/pic/1.jpg",
          yttx: "1",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      vm = this;
    },
    search() {
      console.log(111);
    },
    tableSelect(selectedRowKeys) {
      this.flag = selectedRowKeys.length === 0;
    },
  },
};
</script>
